<template>
  <div class="xtx-bread-item">
       <router-link v-if="to" :to='to'>
         <slot/>
    </router-link>

    <span v-else>
        <slot/>
    </span>
    <!-- 如果传入了separator 使用传入的数据,没有就使用默认的字体图标 -->
    <i v-if="separator">{{separator}}</i>
    <i v-else class="iconfont icon-angle-right"></i>
  </div>
</template>
<script>
import { inject } from 'vue-demi'
export default {
  name: 'XtxBreadItem',

  props: {
    // 点击跳转的连接=> 1. to存在就是可以点击的 2. to不存在不可以点击
    to: {
      type: String,
      default: ''
    }
  },

  setup () {
    // 接收分隔符数据
    const separator = inject('separator')
    return { separator }
  }
}
</script>
<style scoped lang="scss"></style>
